<div>
    <div class="eChart-div">
        <div id="bill_pie" style="width: 100%;height: 400px"></div>
    </div>
    <div class="eChart-div">
        <div id="bill_bar" style="width: 100%;height: 600px"></div>
    </div>
</div>

<script type="text/javascript">
    var bill = JSON.parse('{!! $bill !!}')
    console.log(bill)
    var billPie = {
        id:'bill_pie',
        title: '水票统计销售统计/桶',
        name:'水票统计（已售：'+ bill.final_sale_num +'）',
        legend: ['已消费','未消费'],
        series: [
            {value:parseFloat(bill.final_used_num), name:'已消费'},
            {value:parseFloat(bill.final_surplus_num), name:'未消费'}
        ]
    }
    // 水票销售概况（正负柱状图）
    var billMore = {
        id:"bill_bar",
        title:"水票销售概况/桶",
        legend:['已销售','已消费','未消费'],
        category:[],
        series: [{
            name:'已销售',
            type:'bar',
            stack: 0,
            data:[]
        },{
            name:'已消费',
            type:'bar',
            stack: 1,
            data:[]
        },{
            name:'未消费',
            type:'bar',
            stack: 1,
            data:[]
        }]
    }
    $.each(bill.data, function (j,val) {
        billMore.category.push(val.goods_name);
        billMore.series[0].data.push(val.total_sale_num)
        billMore.series[1].data.push(val.total_use_num)
        billMore.series[2].data.push(val.total_surplus_num)
    });

    $(function () {
        canvasPie(billPie)
        canvasBarMore(billMore)
    });
</script>
